Getting Started with React

Today in this article we will see basic of Reacts. We shall create a simple ‘Hello World‘ application and we shall further extend it to the additional features.

Below are the basic aspects of React we shall try to cover in todays article.

• Installing Prerequisites for React
• “Hello World” Starter App
• Workflow of React

Getting started

React is a client library built using javascript which helps you creating rich User Interface(UI). React uses modern JavaScript including the use of JSX syntax.

JSX is Javascript XML which is JavaScript’s syntax for HTML like code.

Installing Prerequisites for React

Install Node.js

Please make sure to install latest available version of node.js

( Node >= 8.10 is needed on your local development machine )

Starter Application

Please use any of the below commands to create React application.

npx

npx create-react-app getting-started-react

npm

npm init react-app getting-started-react

yarn

yarn create react-app getting-started-react

I have created the application in the directory “C:\React.js\getting-started-react”

Please see below directory structure created

Public
  favicon.ico
    index.html
    logo192.png
    logo512.png
    manifest.json
    robots.txt


src
 App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js
    setupTests.js

Lets run the app, Use any of the below commands,

npm start

or

yarn start

Below is the default template scaffolded,

File App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

What is React component ?

In React, a component is a reusable module in the application.

A React app basically will consist of a tree of React components that bind together to perform certain UI functionality defining the view of your React application. Certainly addressing specific domain functionality as per UI requirements.

Create First React component

We shall now attempt to modify the default created template. We shall add Hello Word in the App,

File App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello, World!
        </p>
      </header>
    </div>
  );
}

export default App;

Let execute the app as below,

Understanding Import Statement

These statements are means of reusing libraries or classes defined elsewhere.

import React from 'react';

React uses syntax called JSX (JavaScript and XML) which is an HTML-in-JavaScript. Above defined import “react” statements bring you all support required for react app development.

Every React application must import the ‘react’ module.

Understanding Export Statement

Before you could import any libraries, that libraries should mark its classes/component as export to be available as consumable.

File App.js

The Export statement at bottom make this App component available to use or references any part of code.Code need to import it and use it which is explained below.

Understanding EntryPoint of Application

File: src/index.js

Let’s go through each element one by one.

import App

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

The above code is an entry point of the application.

App component being used using <App/> tag.

Here App component loads all require JS module in the runtime and render the UI.

Note : Component Name should be named as PascalCase only

import index.css

This file contains the global stylesheets properties which can be applied to the React Application as a whole.

ReactDOM.render

This function ensures Entry component is loaded with require JS module.

The line ‘document.getElementById(‘root’) ‘ indicates that App component is treated as a root component and an entry point of the application.

Commands discussed in the above article

npm start or yarn start

Runt he app

serve -s build

Build and serve the React UI page,

npm run build

Create a production build with a minified version of bundle for production deployment.

That’s All! This was very much basic on React and its basic component.

Reference :

• React- Passing Data From Child Component to Parent Component

Happy Coding !!

Do you have any comments or ideas or any better suggestions to share?

Please sound off your comments below.

Happy Coding !!

Summary

Today in this article we learned a few basics of Reacts. We created a simple ‘Hello World’ application. We also looked at Installing prerequisites required for the React development and understood its workflow in brief.

Please bookmark this page and share it with your friends. Please Subscribe to the blog to receive notifications on freshly published(2024) best practices and guidelines for software design and development.